<!--产品维护表-->
<template>
  <div class="table-wrapper w-100">
    <div class="title rounded shadow-harsh pv-10">
      产品维护表

      <div class="search">

        <el-popover
          placement="bottom"
          trigger="click">

          <div class="flex-row">
            <el-button size="mini" type="success" @click="handleAdd()">新增</el-button>
            <loader tableName="product_maintain" apiName="productMaintain"></loader>
            <exporter tableName="product_maintain"></exporter>
          </div>


          <i slot="reference" class="el-icon-more mr-10"></i>
        </el-popover>


        <el-input
          v-model="search"
          size="mini"
          placeholder="输入样品名称关键字搜索" />
      </div>

    </div>
    <div class="mt-30">

      <!--    通过字段进行 filter-->
      <el-table
        :fit="true"
        :v-loading="loading"
        height="450px"
        class="w-100 rounded shadow-harsh p-5"
        :data="tableData.filter(data => !search || data.serialName.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*10,currentPage*10)">

        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          align="center"
          v-for="(group, index) in groups"
          :label="group.root" :key="index">
          <el-table-column
            v-for="(item, index) in group.items"
            :prop="item.prop"
            :label="item.label"
            sortable show-overflow-tooltip
            align="center"
            :width="item.type === 'datetime' ? 180 : 100"
            :key="index">

            <template scope="scope" v-if="item.type=== 'datetime'">
              <el-date-picker
                style="width: 80%;"
                v-if="scope.$index === editIndex"
                v-model="scope.row[item.prop]"
                type="date"
                size="small"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
              <span style="color: #4f7ff9" v-else>{{ scope.row[item.prop] }}</span>
            </template>

            <template scope="scope" v-else-if="item.type=== 'fixed'">
              <span>{{ scope.row[item.prop] }}</span>
            </template>

            <template scope="scope" v-else>
              <el-input v-if="scope.$index === editIndex" size="small"
                        v-model="scope.row[item.prop]" placeholder="请输入内容">
              </el-input>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>

          </el-table-column>
        </el-table-column>




        <el-table-column width="160px" align="right" fixed="right">
          <template slot-scope="scope">
            <span v-if="scope.$index !== editIndex">
              <el-button
                size="mini"
                type="warning"
                @click="editIndex = scope.$index; imageUrl = ''">修改
              </el-button>

              <el-popconfirm
                @confirm="handleDelete(scope.$index, scope.row)"
                title="您确定要删除数据吗?">
                <el-button
                  slot="reference"
                  size="mini"
                  type="danger">删除
                </el-button>
              </el-popconfirm>

            </span>
            <span v-else>
            <el-button
              size="mini"
              type="success"
              @click="saveEdit(scope.$index, scope.row)">保存
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleCancel">取消
            </el-button>
            </span>


          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pagination"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="10"
                     :total="tableData.length"
                     layout="total, prev, pager, next, jumper">
      </el-pagination>


    </div>

  </div>
</template>

<script>
import loader from "./loader";
import exporter from "./exporter";

export default {
  name: "table-shape-desc",
  components: {
    loader,
    exporter
  },

  mounted() {
    this.$api.getProductMaintain().then(res => {
      this.tableData = res.data["records"].sort((a, b) => {
        return a.serialName - b.serialName;
      });
      console.log(this.tableData);
      this.loading = false;
    });
  },
  methods: {
    getTableIndexByIndex(index) {
      // 通过表的row index来获取表格数据中的row index 在 list 中使用要 -1
      return index + (this.currentPage - 1) * 10 + 1;
    },


    handleDelete(index, row) {
      console.log(index, row);
      this.$api.editProductMaintain("remove", row.id, row).then(res => {
        console.log(res);
        if (res["success"]) {
          let n = this.getTableIndexByIndex(index);
          console.log(n, this.tableData[n - 1]);
          this.tableData.splice(n - 1, 1);

          this.$message({
            message: "删除成功",
            type: "success",
            duration: 2000
          });
        }
      });
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },

    saveEdit(index, row) {

      let method = row.id ? "update" : "save";
      let o = {
        "id": row.id ? row.id : 0 ,
        "costAfterUpdate": row.costAfterUpdate ? row.costAfterUpdate : ' ',
        "costBeforeUpdate": row.costBeforeUpdate ? row.costBeforeUpdate : ' ',
        "createTime": row.createTime ? row.createTime : ' ',
        "flavorAfterUpdate": row.flavorAfterUpdate ? row.flavorAfterUpdate : ' ',
        "flavorBeforeUpdate": row.flavorBeforeUpdate ? row.flavorBeforeUpdate : ' ',
        "maintainer": row.maintainer ? row.maintainer : ' ',
        "productName": row.productName ? row.productName : ' ',
        "productUpdateTime": row.productUpdateTime ? row.productUpdateTime : ' ',
        "serialName": row.serialName ? row.serialName : ' ',
        "shapeAfterUpdate": row.shapeAfterUpdate ? row.shapeAfterUpdate : ' ',
        "shapeBeforeUpdate": row.shapeBeforeUpdate ? row.shapeBeforeUpdate : ' ',
        "soupColorAfterUpdate": row.soupColorAfterUpdate ? row.soupColorAfterUpdate : ' ',
        "soupColorBeforeUpdate": row.soupColorBeforeUpdate ? row.soupColorBeforeUpdate : ' ',
        "specificationBeforeUpdate": row.specificationBeforeUpdate ? row.specificationBeforeUpdate : ' ',
        "updateReason": row.updateReason ? row.updateReason : ' ',
        "updateTime": ''
      };

      console.log("保存", row.id, index, row, o);
      this.$api.editProductMaintain(method, row.id ? row.id : 1, o).then(res => {
        console.log(res);
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 2000
        });

        this.$set(this.tableData, this.getTableIndexByIndex(index) - 1, res.data.data);
        // this.tableData[this.getTableIndexByIndex(index)-1] = res.data['shapeDesc']
        this.editIndex = null;
      });

    },
    handleCancel: function() {
      this.editIndex = null;
      this.tableData = this.tableData.filter(ele => {
        return ele.serialName !== "*";
      });
    },
    handleAdd: function() {
      /*
      * 新增列按照 name * 来识别
      * */

      // 去除之前操作的痕迹
      this.imageUrl = "";
      this.tableData = this.tableData.filter(ele => {
        return ele.serialName !== "*";
      });

      this.tableData.push({ "serialName": "*" });
      let nums = this.tableData.length;
      console.log(Math.floor((nums - 1) / 10) + 1);
      this.currentPage = Math.floor((nums - 1) / 10) + 1;

      this.editIndex = nums % 10 === 0 ? 9 : nums % 10 - 1;
    }

  },

  data() {
    return {
      tableData: [],
      search: "",
      currentPage: 1,
      loading: true,
      editIndex: null,


      imageUrl: "",
      visible: false,

      groups: [
        {
          "root": "基础信息",
          "items": [
            // {
            //   "label": "",
            //   "prop": "id",
            //   "type": "String"
            // },
            {
              "label": "创建时间",
              "prop": "createTime",
              "type": "fixed"
            },
            {
              "label": "更新时间",
              "prop": "updateTime",
              "type": "fixed"
            },
            {
              "label": "系列名称",
              "prop": "serialName",
              "type": "String"
            },
            {
              "label": "产品名称",
              "prop": "productName",
              "type": "String"
            },
            {
              "label": "产品更新时间",
              "prop": "productUpdateTime",
              "type": "datetime"
            },
            {
              "label": "更新原因",
              "prop": "updateReason",
              "type": "String"
            },
            {
              "label": "更新人",
              "prop": "maintainer",
              "type": "String"
            }]
        },

        {
          "root": "升级前",
          "items": [{
            "label": "成本",
            "prop": "costBeforeUpdate",
            "type": "String"
          },
            {
              "label": "体态",
              "prop": "shapeBeforeUpdate",
              "type": "String"
            },
            {
              "label": "汤色",
              "prop": "soupColorBeforeUpdate",
              "type": "String"
            },
            {
              "label": "口味",
              "prop": "flavorBeforeUpdate",
              "type": "String"
            },
            {
              "label": "规格",
              "prop": "specificationBeforeUpdate",
              "type": "String"
            }]
        },

        {
          "root": "升级后",
          "items": [{
            "label": "成本",
            "prop": "costAfterUpdate",
            "type": "String"
          },
            {
              "label": "体态",
              "prop": "shapeAfterUpdate",
              "type": "String"
            },
            {
              "label": "搪塞",
              "prop": "soupColorAfterUpdate",
              "type": "String"
            },
            {
              "label": "口味",
              "prop": "flavorAfterUpdate",
              "type": "String"
            }]
        }
      ]
    }
  }
};
</script>

<style scoped>


.avatar-uploader .el-upload {
  border: 1px dashed #616161;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 10px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.avatar {
  width: 40px;
  height: 40px;
}
</style>